
<template>
  <div class="outter_drawer">
    <el-drawer :title="drawerObj.title"
               :visible.sync="drawerObj.drawer"
               :append-to-body="true"
               :destroy-on-close="true"
               :wrapperClosable="false"
               direction="btt"
               wrapperClosable
               :size='drawerObj.size'>
      <div class="outter_inner_box">
        <el-table :data="tableData"
                  v-loading="loading"
                  border
                  :row-style="{ height: '10px' }"
                  height="350"
                  :cell-style="{padding:'5px'}"
                  style="width: 100%;font-size: 13px">
          <el-table-column prop="task_id"
                           label="任务id"
                           align="center">
          </el-table-column>
          <el-table-column prop="user_info.nickname"
                           label="账号昵称"
                           align="center">
          </el-table-column>
          <el-table-column prop="status"
                           label="状态"
                           align="center">
            <template slot-scope="scope">

              <span>
                <el-tag :type="scope.row.status === 0 ? 'info' :(scope.row.status === 1 ?'primary':(scope.row.status === 2 ?'success':'danger'))"
                        disable-transitions>{{scope.row.status|statusType}}</el-tag>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="total_count"
                           align="center"
                           label="全部记录">
          </el-table-column>
          <el-table-column prop="success_count"
                           label="成功记录"
                           align="center">
          </el-table-column>
          <el-table-column prop="fail_count"
                           label="失败记录"
                           align="center">
          </el-table-column>
          <el-table-column prop="created_at"
                           label="创建时间"
                           align="center">
          </el-table-column>
          <el-table-column label="操作"
                           align="center">
            <template slot-scope="scope">
              <el-button type="primary"
                         icon="el-icon-download"
                         size="small"
                         v-show="scope.row.status==2?true:false"
                         v-downLoadUrl="handleDownloadUrl(scope.row)">下载文件</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination :current-page="exportListQuery.page"
                       :page-sizes="[20,50,100,200]"
                       :page-size="exportListQuery.page_size"
                       :total="tatal"
                       background
                       layout="total, sizes, prev, pager, next, jumper"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { exportDataAsync, exportList } from "@/api/system/exportData"
export default {
  //状态控制
  filters: {
    statusType (type) {
      const map = {
        0: '未处理',
        1: '进行中',
        2: '成功',
        3: '失败'
      }
      return map[type]
    }
  },
  data () {
    return {
      tatal: 0,
      tableData: null,
      exportListQuery: {
        scene: 0,
        page: 1,
        page_size: 20
      },
      loading: true,
      urlInfo: '',
    }
  },
  props: {
    drawerObj: {
      type: Object,
      default: () => { }
    },
    scene: {
      type: Number,
      default: 0
    },
  },
  methods: {
    processExport (param) {
      this.exportListQuery = param
      this.exportFile()
    },
    getExportFileList () {
      if (this.scene !== 0) {
        this.exportListQuery.scene = this.scene
      }
      exportList(this.exportListQuery).then((res) => {
        if (res.data.code === 200) {
          this.loading = false
          this.tableData = res.data.data.list
          this.tatal = res.data.data.count
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    //导出
    exportFile () {
      exportDataAsync(this.exportListQuery).then((res) => {
        if (res.data.code === 200) {
          setTimeout(() => {
            this.getExportFileList()
          }, 1000)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    handleDownloadUrl (row) {
      let url = ''
      let name = ''
      if (row.file_info !== null) {
        url = row.file_info.url
        name = row.file_info.name
      }
      let obj = {
        url: url,
        name: name,
      }

      return obj
    },
    // downLoadFile (row) {
    //   console.log(row);
    //   let a = document.createElement('a')
    //   a.href = row.file_info.url
    //   a.style.display = 'none'
    //   document.body.appendChild(a)
    //   a.click() // 点击下载
    //   document.body.removeChild(a) // 下载完成移除元素
    // },
    rowStyle () {
      let styleObj = {
        'height': '12'
      }
      return styleObj
    },
    handleSizeChange (val) {
      this.exportListQuery.page_size = val
      this.getExportFileList()
    },
    handleCurrentChange (val) {
      this.exportListQuery.page = val
      this.getExportFileList()
    },

  }
}
</script>

<style lang="less" >
.outter_inner_box {
  margin: 10px;
  height: 350px;
  overflow: auto;
}
</style>
